【jQuery】之动画

jQuery

1.预定义动画

显示与隐藏

show()表示显示
hide()表示隐藏
speed中以（slow，normal，fast）表示动画时长

<script src="js/jquery.js"></script>
    <style>
        #qyc {
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div id="qyc"></div>
<script>
    $('#qyc').hide(3000, function(){
        $('#qyc').show(3000);
    });
    /*
    * 显示与与隐藏
    * 无动画-改变宽度和高度
    * show()-显示
    * hide()-隐藏

    * 有动画
    * show(speed, callback)
     * speed-动画执行时长
     * callback-动画执行完毕后回调函数*/
</script>
</body>

滑动式动画

以slideUp和slideDown来更改属性的高度值来实现动画效果

<script src="js/jquery.js"></script>
    <style>
        #qyc {
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div id="qyc"></div>
<script>
    /*
        滑动式动画-slideUp()和slideDown()
        * 注意-没有无动画版本
        * 效果-改变指定元素的高度
     */
    $('#qyc').slideUp(3000);
    $('#qyc').slideDown(3000);

</script>
</body>

淡入淡出效果

fadeln()方法和fadeOut来改变透明度来实现动画效果

<script src="js/jquery.js"></script>
<style>
    #qyc {
        width: 200px;
        height: 200px;
        background-color: blue;
    }
</style>
</head>
<body>
<div id="qyc"></div>
<script>
    $('#qyc').fadeOut(3000);
    $('#qyc').fadeIn(3000);
    // 改变元素的透明度
</script>
</body>

动画切换效果

<script src="js/jquery.js"></script>
    <style>
        #qh {
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
<button id="qyc">按钮</button>
<div id="qh"></div>
<script>
    $('#qyc').click(function(){
        // $('#qyc').toggle(3000);
        // $('#qyc').slideToggle(3000);
        $('#qh').fadeToggle(3000);
    });
</script>
</body>

2.自定义动画

<style>
        #qyc {
            width: 200px;
            height: 200px;
            background-color: blue;
            position: absolute;
        }
    </style>

</head>
<body>
<div id="qyc"></div>
<script>
    /*
    * animate()方法-自定义动画方法
        1.animate(properties, duration, callback)
          * properties-表示CSS的样式属性
            * 设置动画执行结束的样式属性值
          * duration-表示动画执行的时长，单位为毫秒
          * callback-表示动画执行完毕后的回调函数
        2.animate(properties, options)
          * properties-表示CSS的样式属性
            * 设置动画执行结束的样式属性值
          * options-表示设置动画的相关参数
            * duration-表示动画执行的时长，单位为毫秒
            * complete-表示动画执行完毕后的回调函数
            * queue-布尔值，设置是否添加到动画队列中
    */
    /*$('#qyc').animate({
        width : 100,
        height : 100
    }, 3000);*/

    /*$('#qyc').animate({
        left : 100
    }, 3000);*/

    $('#qyc').animate({
        left : 100
    }, {
        speed : 3000
    });
</script>
</body>

并发与排队效果

指同时进行多个动画效果，并以先后顺序执行

<script src="js/jquery.js"></script>
    <style>
        #qyc {
            width: 200px;
            height: 200px;
            background-color: blue;
            position: absolute;
        }
    </style>
</head>
<body>
<div id="qyc"></div>
<script>
    /*$('#qyc').animate({
        left : 400,
        top : 400
    }, 3000);*/
    /*并发效果-就是指多个动画同时执行
     *多个CSS样式属性值同时改变-动画多个值综合效果
     */

    $('#qyc').animate({
        left : 400
    }, 3000, function(){
        $('#qyc').animate({
            top : 400
        }, 3000);
    });
    /*
      排队效果 - 就是指多个动画按照定义先后顺序执行
      多个CSS的样式属性值先后改变
     */
    $('#qyc').animate({
        left : 400
    }, {
        duration : 3000
    }).animate({
        top : 400
    }, {
        duration : 3000,
        queue : true
    });
</script>
</body>

停止动画效果

以stop()方法表示停止指定元素运行的动画以gotoEnd表示动画立刻执行完成

<script src="js/jquery.js"></script>
    <style>
        #qyc {
            width: 200px;
            height: 200px;
            background-color: blue;
            position: absolute;
        }
    </style>
</head>
<body>
<button id="start">开始</button>
<button id="stop">停止</button>
<div id="qyc"></div>
<script>
    $('#start').click(function(){
        $('#qyc').animate({
            left : 800
        }, 3000).animate({
            top : 600
        }, 3000);
    });
    $('#stop').click(function(){
        /*
            * stop()方法没有接收任何参数时-停止执行动画
            * stop(queue)方法的第一个参数
              * false-停止当前动画，但队列中动画继续执行
              * true-停止当前动画，并且清空动画

         */
        $('#qyc').stop(true, false);
    });
</script>
</body>

延迟执行动画

以delay()方法设置延时一定时间，在执行动画效果

<script src="js/jquery.js"></script>
    <style>
        #qyc {
            width: 200px;
            height: 200px;
            background-color: blue;
            position: absolute;
        }
    </style>
</head>
<body>
<div id="qyc"></div>
<script>
    $('#qyc').animate({
        left: 800
    }, 5000).delay(1000).animate({
        top: 600
    }, 5000);

</script>
</body>